<template>
  <div class="commentBox">
    <div class="data-box"></div>
    <p class="data-ping">全部评论</p>
    <p v-if="comment.length==0">暂无评论，我来发表第一篇评论！</p>
    <div v-else>
      <div class="comment" v-for="(item,index) in comment" v-bind:index="index" :key="item.id">
        <img :src="item.headimg" width="30" height="30" class="rounded-circle" alt="BV">
        <b class="data-name">
          {{item.username}}
          <span class="data-time" v-text="times(item.createAt)"></span> 天前
        </b>
        <span class="data-right" style="float:right" @click="delept(item)" v-show="item.username==papersession.username">删除</span>
        <p class="data-content">
          <span v-html="emoji(item.info)"></span>
          <strong class="mat" id="admire">
            <i
              class="iconfont icon-shuohuaqipao distance"
              style="margin-right:20px"
              @click="open(index)"
            ></i>
            <img
              class="distance"
              src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/hongxin.png"
              style="width:16px;height:16px;margin-bottom:4px"
              @click="dataclick(item)"
            >
            <span class="data-span">点赞{{item.fabulous}}</span>
          </strong>
        </p>
        <div class="form-group text-right" v-show="activeIndex===index">
          <textarea class="data-text" placeholder="  请填写评论内容" v-model="content"></textarea>
          <br>
          <el-button type="primary" @click="createreply( item.ID)" round>评论</el-button>
        </div>
        <div>
          <div
            class="reply"
            v-for="(item,index) in item.children"
            v-bind:index="index"
            :key="item.id"
          >
            <b class="data-res">
              回复：{{item.username}}
              <span class="data-reti" v-text="times(item.createAt)"></span>天前
            </b>
            <p class="data-reply">
              {{item.info}}
              <strong class="matw" id="admire">
                <img
                  class="distance"
                  @click="dataclick(item)"
                  src="https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images1/hongxin.png"
                  style="width:16px;height:16px;margin-bottom:4px"
                >
                <span class="data-span">点赞{{item.fabulous}}</span>
              </strong>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  asynccreatesharecommentfabulous,
  asyncgetsharebyid,
  session,
  asyncdelectsharecommentbyid,
  asyncgetsharefabulousbyid,
  asynccreatesharecomment
} from "@/plugins/api.js";
var id = window.location.search.split("?")[1];
const local_admire = localStorage.getItem("admire");
export default {
  props: ["comment"],

  data() {
    return {
      admire: local_admire,
      paperid: [],
      paperlous: {},
      papersession: [],
      content: "",
      activeIndex: -1
    };
  },
  methods: {
    getTime() {
      var now = new Date();
      return now;
    },
    async createreply(item) {
      if (this.content) {
        await asynccreatesharecomment({
          shareid: id,
          info: this.content,
          paterid: item
        });
        window.location.reload();
        this.activeIndex = false;
      } else {
        this.$message.error("评论不能为空");
      }
    },
    open(index) {
      this.activeIndex = index;
    },
    async delept(item) {
          asyncdelectsharecommentbyid({ ID: item.ID });
      window.location.reload();
      
    },
    times(time) {
      return Math.ceil(
        (Date.parse(new Date()) - Date.parse(new Date(time))) /
          1000 /
          60 /
          60 /
          24
      );
    },
    async dataclick(item) {
      this.admire == false ? (this.admire = true) : (this.admire = false);
      localStorage.setItem("admire", this.admire);
      if (this.admire == false) {
        item.fabulous++;
        await asynccreatesharecommentfabulous({ sharecommentid: item.ID });
      } else {
        item.fabulous--;
        await asynccreatesharecommentfabulous({ sharecommentid: item.ID });
      }
    },
    commentfabulous: function() {
      this.listLoading = true;
      asynccreatesharecommentfabulous({ sharecommentid: id })
        .then(res => {
          this.fabulous = res;
          console.log(this.fabulous);
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getsharebyid: function() {
      this.listLoading = true;
      asyncgetsharebyid({ ID: id })
        .then(res => {
          if (this.paperid.fabulous == null) {
            this.paperid.fabulous = 0;
          }
          this.paperid = res;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getsession: function() {
      this.listLoading = true;
      session()
        .then(res => {
          this.papersession = res;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getcommentbyid: function() {
      this.listLoading = true;
      asyncdelectsharecommentbyid({ ID: id })
        .then(res => {
          this.papercommentbyid = res;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getsharefabulousbyid: function() {
      this.listLoading = true;
      asyncgetsharefabulousbyid({ shareid: id })
        .then(res => {
          this.paperfabulousbyid = res;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getcreatesharecomment: function() {
      this.listLoading = true;
      asynccreatesharecomment({ shareid: id, info: "this.content" })
        .then(res => {
          this.papercomment = res;
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted: function() {
    //钩子函数
    this.getsharebyid();
    this.getsession();
  }
};
</script>
<style scoped>
.data-right {
  cursor: pointer;
}
.data-text {
  width: 100%;
  height: 50px;
}
.comment {
  width: 100%;
}
.data-time {
  margin-left: 50px;
}
.data-reti {
  margin-left: 10px;
}
.data-name {
  width: 80px;
  height: 15px;
  font-family: MicrosoftYaHei;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #474747;
  margin-top: 37px;
}
.data-res {
  margin-left: 88px;
  height: 15px;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #727272;
}
.data-reply {
  margin-left: 92px;
  margin-bottom: 0px;
}
.reply {
  width: 100%;
  height: 64px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #e8e8e8;
}
.data-span {
  width: 44px;
  height: 15px;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #727272;
}
.mat {
  float: right;
}
.matw {
  float: right;
  margin-right: 4px;
}
.data-content {
  width: 90%;
  height: 50px;
  margin-top: 24px;
  margin-bottom: 0px;
}
.data-time {
  margin-left: 10px;
}
.commentBox {
  width: 100%;
}
.data-box {
  width: 7px;
  height: 19px;
  background-color: #4c77ff;
  float: left;
  margin-right: 10px;
}
.data-ping {
  height: 20px;
  font-family: MicrosoftYaHei;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #3c3c3c;
  line-height: 19px;
  margin-top: 30px;
}
</style>